<template>
	<view>
		<view class="flex_sb nav_boxs flxe_al">
			<view class="flex nav_flex">
				<view :class="actives==0?'nav_flex_active':''" @click="actives_type(0)">
					鞋柜自取
				</view>
				<view :class="actives==1?'nav_flex_active':''" @click="actives_type(1)">
					全城配送
				</view>
			</view>
			<view class="flex nav_text_flex" @click="shows()">
				{{values}}
				<image src="https://z1.ax1x.com/2023/09/18/pP4Mmp8.png" mode=""></image>
			</view>
		</view>

		<view class="order-tab" v-show="actives==0">
			<view class="order-li" :class="type == item.num?'active':''" v-for="(item,index) in orderTabList"
				:key="index" @click="tabClick(index,item.num)">
				{{item.name}}
			</view>
		</view>

		<view class="order-tab" v-show='actives==1'>
			<view class="order-li" :class="type == item.num?'active':''" v-for="(item,index) in orderTabLists"
				:key="index" @click="tabClick(index,item.num)">
				{{item.name}}
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list" v-if="orderList.length > 0">
			<view class="order-li" v-for="(item,index) in orderList" :key="index">
				<view class="order-li-no">
					<view>订单号：{{ item.order_sn}}</view>
					<text v-if="active == 0">用户待存鞋</text>
					<text v-if="active == 1">待取鞋</text>
					<text v-if="active == 2">待存鞋</text>
					<text v-if="active == 3">已完成</text>
				</view>
				<view class="order-li-xq">
					<view class="order-li-xq-list" @click="goXq(item.id)">
						<image :src="'https://www.sdxiecheng.cn/'+item.goods_image" mode=""></image>
						<view class="order-li-xq-list-r">
							<view class="title">{{ item.goods_title }}</view>
							<view class="des u-line-2">
								{{ item.goods_describle }}
							</view>
							<view class="flex_sb">
								<view class="price">
										¥{{ item.goods_price}}
									</view>
								<view class="price_nums">
									X{{item.goods_num}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order-bottom">
					<button class="u-reset-button" @click="goXq(item.id)">查看详情</button>
					<!-- <button class="u-reset-button btn1" v-if="active == 0" @click="openGuiMen(item.id)">打开柜门</button> -->
					<!-- <button class="u-reset-button btn1" v-if="active == 1" @click="openGuiMen(item.id)">打开柜门</button> -->
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 20vh;">
			<u-empty text="暂无订单"></u-empty>
		</view>
		<!-- <u-tabbar :list="tabbar"
		 
		 :before-switch="beforeSwitch"
		 :mid-button="true" :border-top="false"  mid-button-size="110" active-color="#FF9A33" inactive-color="#999999"></u-tabbar> -->

		<!-- 取消订单 -->
		<u-modal v-model="guiziShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
			:confirm-style="confirmStyle" @confirm="isOpenGuiZi"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}">
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
		 		font-size: 28rpx;
		 		margin-bottom: 50rpx;
		 		margin-top: 49rpx;
		 		line-height: 45rpx;
		 		">
					<text>
						打开柜门
					</text>
					<text>
						请确保本人在柜子前面
					</text>
				</view>
			</view>
		</u-modal>
		<!-- 柜子打开成功 -->
		<u-modal v-model="guiziChengGongShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10"
			:confirm-style="confirmStyle" confirm-text="完成" @confirm="openGuiMenChengGong()"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}">
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
		 		font-size: 28rpx;
		 		margin-bottom: 50rpx;
		 		margin-top: 49rpx;
		 		line-height: 45rpx;
		 		">
					<text style="color: #FF9A33;">
						{{ num }} 号
					</text>
					<text>
						柜门已打开，请存鞋
					</text>
				</view>
			</view>
		</u-modal>
		<u-popup v-model="show" mode='bottom' border-radius="10" close-icon='close-circle' close-icon-size=50
			close-icon-color='#B8B8B8'>
			<view class="sky_pos" @click="show=false">
				<image src="https://z1.ax1x.com/2023/09/15/pPWscnI.png" mode=""></image>
			</view>
			<view class="ss_box">
				<view class="ssh2">
					搜索
				</view>
				<input v-model="values" type="text" placeholder="请输入社区名称或者手机号进行搜索">
				<button @click="search()">搜索</button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				actives: 0,
				values: '', //搜索内容
				active: 0,
				type:'',
				tabbar: [],
				num: 0,
				guiziShow: false,
				guiziChengGongShow: false,
				order_id: 0,
				orderTabList: [{
						name: '用户待存鞋',
						num: 0
					},
					{
						name: '待取鞋',
						num: 1
					},
					{
						name: '待存鞋',
						num: 3
					},
					{
						name: '已完成',
						num: 4
					}
				],
				orderTabLists: [{
						name: '待取鞋',
						num: 1
					},
					{
						name: '待配送',
						num: 2
					},
					{
						name: '待用户确认',
						num: 3
					},
					{
						name: '已完成',
						num: 4
					}
				],
				orderList: [],
				httpType: []
			}
		},
		onLoad(e) {
			this.tabbar = this.$store.state.tabbar
			this.httpType = e.type
			this.type = 0
			this.getOrderList()
		},
		onShow() {
			this.getOrderList()
		},
		methods: {
			shows() {
				this.show = true
			},
			//搜索
			search() {
				this.getOrderList()
				this.show = false
			},
			beforeSwitch(index) {
				console.log(index)
				if (index != 2) {
					return true
				} else {
					uni.scanCode({
						success: function(res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
					return false
				}
			},
			goXq(id) {
				let type = ''
				switch (this.type) {
					case 0:
						type = 'yhdqx'
						break;
					case 1:
						type = 'dqx'
						break;
					case 3:
						type = 'dcx'
						break;
					case 4:
						type = 'ywc'
						break;
				}
				if (this.actives == 0) {
					uni.navigateTo({
						url: 'details/details?id=' + id + '&type=' + type
					})

				} else {
					uni.navigateTo({
						url: 'details/on_details?id=' + id + '&type=' + type
					})

				}

			},
			tabClick(index, typeId) {
				this.active = index
				this.type = typeId
				this.orderList = []
				this.getOrderList()
			},
			openGuiMen(id) {
				this.guiziShow = true
				this.order_id = id
			},
			isOpenGuiZi() {
				let that = this
				this.guiziShow = false
				uni.showLoading({
					title: '柜子打开中。。。'
				})
				uni.$u.http.post('/delivery/open_cshoe', {
					order_id: this.order_id
				}).then(res => {
					that.guiziChengGongShow = true
					that.num = res.data.info
					uni.hideLoading()
					console.log(res)
				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: 'none',
						title: err.data.msg
					})
				})
			},
			openGuiMenChengGong() {
				this.guiziChengGongShow = false
				this.orderList = []
				this.getOrderList()
			},
			actives_type(e) {
				this.actives = e
				if(e==0){
					this.type=0
				}else{
					this.type=1
				}
				this.values = ''
				this.getOrderList()
			},
			// 获取订单接口
			getOrderList() {
				if (this.actives == 0) {
					uni.$u.http.post('/delivery/take_order', {
						delivery_status: this.type,
						type: this.httpType,
						searchvalue: this.values
					}).then(res => {
						console.log(res)
						this.orderList = res.data
					}).catch(err => {
						if (err.data.code == 201) {
							this.orderList = []
						}
					})
				} else {
					uni.$u.http.post('/delivery/take_orderon', {
						delivery_status: this.type,
						type: this.httpType,
						searchvalue: this.values
					}).then(res => {
						console.log(res)
						this.orderList = res.data
					}).catch(err => {
						if (err.data.code == 201) {
							this.orderList = []
						}
					})
				}

			}
		}
	}
</script>

<style lang="less">
	.order-tab {
		background: #FFFFFF;
		margin-top: 5rpx;
		padding: 0 31rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		height: 80rpx;

		.order-li {
			font-size: 28rpx;
			color: #333333;
		}

		.active {
			color: #FBAA27;
			font-weight: bold;
		}
	}

	.order-list {
		padding: 10rpx 20rpx;

		.order-li {
			width: 100%;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			padding: 0 8rpx;
		}

		.order-li-no {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 82rpx;
			border-bottom: 2rpx solid #F7F7F9;

			view {
				font-size: 24rpx;
				color: #797979;
			}

			text {
				font-size: 24rpx;
				color: #FF9A33;
			}

			padding: 0 13rpx;
		}

		.order-li-xq-list {
			padding: 30rpx 12rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F7F7F9;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.order-li-xq-list-r {
				width: calc(100% - 160rpx);
				padding-left: 21rpx;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 13rpx;
				}

				.des {
					font-size: 24rpx;
					color: #7C7C7C;
					line-height: 30rpx;
					margin-bottom: 33rpx;
				}

				.price {
					font-size: 24rpx;
					color: #FBAA27;
					font-weight: bold;
				}
			}
		}

		.order-bottom {
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			button {
				margin: 0;
				margin-left: 30rpx;
				border-radius: 25rpx;
				border: 1px solid #FF7759;
				padding: 0 17rpx;
				line-height: 50rpx;
				font-size: 24rpx;
				font-weight: normal;
				color: #FF9A33;
			}

			.btn1 {
				border: 1px solid #FF9A33;
				color: #FF9A33;
			}
		}
	}

	.ssh2 {
		font-size: 32rpx;
		font-weight: 800;
		color: #333333;
		text-align: center;
	}

	.ss_box {
		padding: 40rpx 20rpx 60rpx;
	}

	.ss_box>input {
		box-sizing: border-box;
		margin: 40rpx 0 80rpx;
		width: 100%;
		height: 70rpx;
		background: #F6F6F6;
		border-radius: 35px;
		font-size: 28rpx;
		font-weight: normal;
		color: #7C7C7C;
		padding: 0 20rpx;
	}

	.sky_pos {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.sky_pos>image {
		width: 45rpx;
		height: 45rpx;
	}

	.ssh2 {
		font-size: 32rpx;
		font-weight: 800;
		color: #333333;
	}

	.ss_box>button {
		width: 100%;
		height: 80rpx;
		background: #FF9A33;
		border-radius: 40rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: normal;
		color: #FFFFFF;
	}

	.nav_boxs {
		padding: 18rpx 20rpx;
		background: #FFFFFF;
	}

	.nav_flex {
		background: #F2F2F2;
		border-radius: 24rpx;
	}

	.nav_flex>view {
		width: 140rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		border-radius: 24rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}

	.nav_flex_active {
		background: #FF9A33;
		color: #ffffff !important;
	}

	.nav_text_flex {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.nav_text_flex image {
		width: 28rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}
	.price_nums{
		font-size: 24rpx;
		font-weight: 400;
		color: #7C7C7C;
	}
</style>